<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl">

	<head>
		<title>cSans - Background demo</title>

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" />

		<link rel="stylesheet" href="../csans/csans.css" type="text/css" />
		<link rel="stylesheet" href="../csans/grid-950-24-10/css/csans-grid-950-24-10.css" type="text/css" />
		<link rel="stylesheet" href="../csans/background/csans-background.css" type="text/css" />
	</head>

	<body>
		<div class="page">
			<div class="row t4 b8">
				<h1 class="col11 r1">cSans background demo</h1>
				<p class="col12 t3">
					You can create shadows and vertical fluid backgrounds.<br />
					Only need a big image.
				</p>
			</div>
			
			<div class="row b4">
				<div class="col7 background">
					<div class="content">
						<p>
							<strong>Default background (fixed width and fluid height)</strong><br />
							.background > .content
						<p>
					</div>
				</div>
				
				<div class="col7 background">
					<div class="content p1">
						<p>
							<strong>Default background with 10px padding</strong><br />
							.background > .content.p1
						<p>
					</div>
				</div>
				
				<div class="col7 background">
					<div class="content p2">
						<p>
							<strong>Default background with 20px padding</strong><br />
							.background > .content.p2
						<p>
					</div>
				</div>
			</div>
			
			<div class="row b4">
				<div class="col7 background-bottom">
					<div class="content">
						<p>
							<strong>Default background-bottom (background extends from bottom to top)</strong><br />
							.background-bottom > .content
						<p>
					</div>
				</div>
				
				<div class="col7 background-bottom">
					<div class="content p1">
						<p>
							<strong>Default background-bottom with 10px padding</strong><br />
							.background-bottom > .content.p1
						<p>
					</div>
				</div>
				
				<div class="col7 background-bottom">
					<div class="content p2">
						<p>
							<strong>Default background-bottom with 20px padding</strong><br />
							.background-bottom > .content.p2
						<p>
					</div>
				</div>
			</div>
			
			<div class="row b4">
				<div class="col6 shadow">
					<div class="content">
						<p>
							<strong>Default shadow (5px shadow, fluid width and height)</strong><br />
							.shadow > .content
						<p>
					</div>
				</div>
				
				<div class="col10 shadow">
					<div class="content p2">
						<p>
							<strong>Default shadow with 20px padding</strong><br />
							.shadow > .content.p2
						<p>
					</div>
				</div>
				
				<div class="col7 shadow-left last">
					<div class="content p1">
						<p>
							<strong>Default shadow-left with 10px padding</strong><br />
							.shadow-left > .content.p1
						<p>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>